import { withRouter } from "next/router";
import Link from 'next/link';
import { Row, Col } from "antd";
import { replaceImageUrl, targetUrl, formatActivityClass } from '@/utils';
// css
import styles from '@/styles/Index.module.scss';

const Recommend = ({ data }) => {
    return (
        <Row>
            <Col span={12} style={{ paddingRight: '20px' }}>
                <h3 className={styles['sub-title']}>特价促销</h3>
                <Row>
                    {
                        data.slice(0, 2).map(item => {
                            return (
                                <Col span={12} key={item.id}>
                                    <Link href={targetUrl(item)} prefetch={false}>
                                        <a className={[styles['box'], formatActivityClass(item.algorithms)].join(' ')} title={item.description} target="_blank">
                                            <img src={replaceImageUrl(item.thumbnail)} alt="西藏旅游" />
                                            <h3 className={styles['txt']}>{item.goodsName}</h3>
                                            <p className={styles['price']}>
                                                <b>￥</b><em>{item['showPrice']}</em>起
                                            </p>
                                        </a>
                                    </Link>
                                </Col>
                            )
                        })
                    }
                </Row>
            </Col>
            <Col span={12} style={{ paddingLeft: '20px' }}>
                <h3 className={styles['sub-title']}>今日推荐</h3>
                <Row>
                    {
                        data.slice(2).map(item => {
                            return (
                                <Col span={12} key={item.id}>
                                    <Link href={targetUrl(item)} prefetch={false}>
                                        <a className={[styles['box'], formatActivityClass(item.algorithms)].join(' ')} title={item.description} target="_blank">
                                            <img src={replaceImageUrl(item.thumbnail)} alt="西藏旅游" />
                                            <h3 className={styles['txt']}>{item.goodsName}</h3>
                                            <p className={styles['price']}>
                                                <b>￥</b><em>{item['showPrice']}</em>起
                                            </p>
                                        </a>
                                    </Link>
                                </Col>
                            )
                        })
                    }
                </Row>
            </Col>
        </Row>
    )
}

export default withRouter(Recommend)